<template>
	<view class="container">
		<!-- 学习进度概览 -->
		<view class="overview">
			<view class="overview-item">
				<text class="num">{{studyStats.totalTime}}</text>
				<text class="label">总学习时长</text>
			</view>
			<view class="overview-item">
				<text class="num">{{studyStats.completedCourses}}</text>
				<text class="label">已完成课程</text>
			</view>
			<view class="overview-item">
				<text class="num">{{studyStats.continuousDays}}</text>
				<text class="label">连续学习天数</text>
			</view>
		</view>
		
		<!-- 最近学习 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">最近学习</text>
				<text class="more">查看全部</text>
			</view>
			<view class="recent-list">
				<view class="recent-item" v-for="(item, index) in recentList" :key="index" @tap="continueLearning(item)">
					<image :src="item.cover" mode="aspectFill" class="course-image"></image>
					<view class="course-info">
						<text class="course-name">{{item.name}}</text>
						<view class="progress-bar">
							<view class="progress" :style="{ width: item.progress + '%' }"></view>
						</view>
						<text class="progress-text">已学习 {{item.progress}}%</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 学习计划 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">学习计划</text>
				<text class="more">编辑</text>
			</view>
			<view class="plan-list">
				<view class="plan-item" v-for="(item, index) in planList" :key="index">
					<view class="plan-time">
						<text class="time">{{item.time}}</text>
						<text class="date">{{item.date}}</text>
					</view>
					<view class="plan-content">
						<text class="plan-title">{{item.title}}</text>
						<text class="plan-desc">{{item.description}}</text>
					</view>
					<view class="plan-status" :class="{ completed: item.completed }">
						{{item.completed ? '已完成' : '待学习'}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 学习统计 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">学习统计</text>
				<text class="more">查看详情</text>
			</view>
			<view class="stats-chart">
				<view class="chart-item" v-for="(item, index) in weekStats" :key="index">
					<view class="chart-bar" :style="{ height: item.value + '%' }"></view>
					<text class="chart-label">{{item.label}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			studyStats: {
				totalTime: '128小时',
				completedCourses: 5,
				continuousDays: 7
			},
			recentList: [
				{
					id: 1,
					name: 'Python基础入门',
					cover: '/static/course/python.jpg',
					progress: 75
				},
				{
					id: 2,
					name: 'AI图像识别实战',
					cover: '/static/course/ai.jpg',
					progress: 45
				},
				{
					id: 3,
					name: '数据分析与可视化',
					cover: '/static/course/data.jpg',
					progress: 30
				}
			],
			planList: [
				{
					time: '09:00',
					date: '今天',
					title: 'Python基础课程',
					description: '第5章：函数与模块',
					completed: false
				},
				{
					time: '14:00',
					date: '今天',
					title: 'AI图像识别',
					description: '第3章：卷积神经网络',
					completed: true
				},
				{
					time: '16:00',
					date: '今天',
					title: '数据分析',
					description: '第2章：数据清洗',
					completed: false
				}
			],
			weekStats: [
				{ label: '周一', value: 60 },
				{ label: '周二', value: 80 },
				{ label: '周三', value: 40 },
				{ label: '周四', value: 90 },
				{ label: '周五', value: 70 },
				{ label: '周六', value: 50 },
				{ label: '周日', value: 30 }
			]
		}
	},
	methods: {
		continueLearning(course) {
			uni.navigateTo({
				url: '/pages/course/learn?id=' + course.id
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 15px;
}

.overview {
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 15px;
	
	.overview-item {
		text-align: center;
		
		.num {
			font-size: 24px;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 5px;
		}
		
		.label {
			font-size: 14px;
			color: #999;
		}
	}
}

.section {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		
		.section-title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
		
		.more {
			font-size: 14px;
			color: #018EFF;
		}
	}
}

.recent-list {
	.recent-item {
		display: flex;
		margin-bottom: 15px;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.course-image {
			width: 120px;
			height: 80px;
			border-radius: 8px;
			margin-right: 12px;
		}
		
		.course-info {
			flex: 1;
			
			.course-name {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 8px;
			}
			
			.progress-bar {
				height: 4px;
				background-color: #f5f5f5;
				border-radius: 2px;
				margin-bottom: 5px;
				
				.progress {
					height: 100%;
					background-color: #018EFF;
					border-radius: 2px;
				}
			}
			
			.progress-text {
				font-size: 12px;
				color: #999;
			}
		}
	}
}

.plan-list {
	.plan-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.plan-time {
			width: 80px;
			text-align: center;
			
			.time {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				display: block;
			}
			
			.date {
				font-size: 12px;
				color: #999;
				margin-top: 4px;
			}
		}
		
		.plan-content {
			flex: 1;
			margin: 0 15px;
			
			.plan-title {
				font-size: 16px;
				color: #333;
				display: block;
				margin-bottom: 4px;
			}
			
			.plan-desc {
				font-size: 12px;
				color: #999;
			}
		}
		
		.plan-status {
			font-size: 12px;
			color: #ff6b6b;
			padding: 4px 8px;
			border-radius: 10px;
			background-color: rgba(255,107,107,0.1);
			
			&.completed {
				color: #52c41a;
				background-color: rgba(82,196,26,0.1);
			}
		}
	}
}

.stats-chart {
	display: flex;
	justify-content: space-between;
	height: 200px;
	align-items: flex-end;
	padding: 20px 0;
	
	.chart-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 5px;
		
		.chart-bar {
			width: 20px;
			background-color: #018EFF;
			border-radius: 10px;
			transition: height 0.3s;
		}
		
		.chart-label {
			font-size: 12px;
			color: #999;
			margin-top: 8px;
		}
	}
}
</style> 